{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}管理中心{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css' %}">
    <style>
        .wiki {
            margin-top: 60px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-body {
            padding: 0;
        }

        .title-list {
            border-right: 1px solid #dddddd;
            min-height: 500px;
        }

        .title-list ul {
            padding-left: 15px;
        }

        .title-list ul a {
            display: block;
            padding: 5px 0;
        }

        .content {
            border-left: 1px solid #dddddd;
            min-height: 600px;
            margin-left: -1px;
        }

        .editormd-fullscreen {
            margin-top: 60px;
            z-index: 1001;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid wiki">

        <div class="panel panel-default">
            <div class="panel-heading">
                <div>
                    <i class="fa fa-book" aria-hidden="true"></i> wiki文档
                </div>
                <div class="function">
                    <a type="button" class="btn btn-success btn-xs"
                       href="{% url 'wiki_add' project_id=request.tracer.project.id %}">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                    </a>
                    {% if wiki_object %}
                        <a type="button" class="btn btn-primary btn-xs"
                           href="{% url 'wiki_edit' project_id=request.tracer.project.id wiki_id=wiki_object.id %}">
                            <i class="fa fa-edit" aria-hidden="true"></i> 编辑
                        </a>
                        <a type="button" class="btn btn-danger btn-xs"
                           href="{% url 'wiki_delete' project_id=request.tracer.project.id wiki_id=wiki_object.id %} ">
                            <i class="fa fa-trash" aria-hidden="true"></i> 删除
                        </a>
                    {% endif %}
                </div>
            </div>
            <div class="panel-body">
                <div class="col-sm-3 title-list">
                    <ul id="catalog">
                    </ul>

                </div>
                <div class="col-sm-9 content">
                    <form id="addForm" method="POST" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            {% if field.name == 'content' %}
                                <div id="editor">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error-msg"></span>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error-msg"></span>
                                </div>
                            {% endif %}
                        {% endfor %}

                        <div class="row">
                            <div class="col-xs-3">
                                <input id="btnAddSubmit" type="button" class="btn btn-primary" value="提  交"/>
                            </div>
                        </div>
                    </form>

                </div>
                <div></div>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/plugins/image-dialog/image-dialog.js' %}"></script>
    <script>
        var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tracer.project.id %}";
        $(function () {
            initCatalog();
            BindbtnAddClick();
            initEditor();
        });

        function BindbtnAddClick() {
            $("#btnAddSubmit").click(function () {
                $("#addForm").submit();
            })
        }

        function initCatalog() {
            $.ajax({
                url: "{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
                type: "GET",
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            var href = WIKI_DETAIL_URL + "?wiki_id=" + item.id;
                            var li = $("<li>").attr('id', "id_" + item.id).append($('<a>').text(item.title).attr('href', href)).append($('<ul>'));

                            if (!item.parent_id) {
                                // 添加到catalog中
                                $('#catalog').append(li);
                            } else {
                                $("#id_" + item.parent_id).children('ul').append(li);
                            }
                        })
                    } else {
                        alert("初始化目录失败");
                    }
                }
            })
        }

        function initEditor() {
            var img_url = "";
            {% if form.instance.id %}
                img_url = "{% url 'wiki_uploads' project_id=request.tracer.project.id wiki_id=form.instance.id %}";
            {% else %}
                img_url = "{% url 'wiki_uploads' project_id=request.tracer.project.id wiki_id=0 %}";
            {% endif %}
            var editor = editormd("editor", {
                placeholder: "请输入内容",
                width: "100%",
                height: "500px",
                path: "{% static 'plugins/editor-md/lib/' %}",
                imageUpload: true,          // Enable/disable upload
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: img_url,             // Upload url
            });
        }

        /*    mdeditor的配置项  https://github.com/pandao/editor.md/blob/master/README.md
        {
    mode                 : "gfm",          // gfm or markdown
    name                 : "",             // Form element name for post
    value                : "",             // value for CodeMirror, if mode not gfm/markdown
    theme                : "",             // Editor.md self themes, before v1.5.0 is CodeMirror theme, default empty
    editorTheme          : "default",      // Editor area, this is CodeMirror theme at v1.5.0
    previewTheme         : "",             // Preview area theme, default empty
    markdown             : "",             // Markdown source code
    appendMarkdown       : "",             // if in init textarea value not empty, append markdown to textarea
    width                : "100%",
    height               : "100%",
    path                 : "./lib/",       // Dependents module file directory
    pluginPath           : "",             // If this empty, default use settings.path + "../plugins/"
    delay                : 300,            // Delay parse markdown to html, Uint : ms
    autoLoadModules      : true,           // Automatic load dependent module files
    watch                : true,
    placeholder          : "Enjoy Markdown! coding now...",
    gotoLine             : true,           // Enable / disable goto a line
    codeFold             : false,
    autoHeight           : false,
    autoFocus            : true,           // Enable / disable auto focus editor left input area
    autoCloseTags        : true,
    searchReplace        : true,           // Enable / disable (CodeMirror) search and replace function
    syncScrolling        : true,           // options: true | false | "single", default true
    readOnly             : false,          // Enable / disable readonly mode
    tabSize              : 4,
    indentUnit           : 4,
    lineNumbers          : true,           // Display editor line numbers
    lineWrapping         : true,
    autoCloseBrackets    : true,
    showTrailingSpace    : true,
    matchBrackets        : true,
    indentWithTabs       : true,
    styleSelectedText    : true,
    matchWordHighlight   : true,           // options: true, false, "onselected"
    styleActiveLine      : true,           // Highlight the current line
    dialogLockScreen     : true,
    dialogShowMask       : true,
    dialogDraggable      : true,
    dialogMaskBgColor    : "#fff",
    dialogMaskOpacity    : 0.1,
    fontSize             : "13px",
    saveHTMLToTextarea   : false,          // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.
    disabledKeyMaps      : [],

    onload               : function() {},
    onresize             : function() {},
    onchange             : function() {},
    onwatch              : null,
    onunwatch            : null,
    onpreviewing         : function() {},
    onpreviewed          : function() {},
    onfullscreen         : function() {},
    onfullscreenExit     : function() {},
    onscroll             : function() {},
    onpreviewscroll      : function() {},

    imageUpload          : false,          // Enable/disable upload
    imageFormats         : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL       : "",             // Upload url
    crossDomainUpload    : false,          // Enable/disable Cross-domain upload
    uploadCallbackURL    : "",             // Cross-domain upload callback url

    toc                  : true,           // Table of contents
    tocm                 : false,          // Using [TOCM], auto create ToC dropdown menu
    tocTitle             : "",             // for ToC dropdown menu button
    tocDropdown          : false,          // Enable/disable Table Of Contents dropdown menu
    tocContainer         : "",             // Custom Table Of Contents Container Selector
    tocStartLevel        : 1,              // Said from H1 to create ToC
    htmlDecode           : false,          // Open the HTML tag identification
    pageBreak            : true,           // Enable parse page break [========]
    atLink               : true,           // for @link
    emailLink            : true,           // for email address auto link
    taskList             : false,          // Enable Github Flavored Markdown task lists
    emoji                : false,          // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
                                           // Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;
                                           // Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;
    tex                  : false,          // TeX(LaTeX), based on KaTeX
    flowChart            : false,          // flowChart.js only support IE9+
    sequenceDiagram      : false,          // sequenceDiagram.js only support IE9+
    previewCodeHighlight : true,           // Enable / disable code highlight of editor preview area

    toolbar              : true,           // show or hide toolbar
    toolbarAutoFixed     : true,           // on window scroll auto fixed position
    toolbarIcons         : "full",         // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
    toolbarTitles        : {},
    toolbarHandlers      : {
        ucwords : function() {
            return editormd.toolbarHandlers.ucwords;
        },
        lowercase : function() {
            return editormd.toolbarHandlers.lowercase;
        }
    },
    toolbarCustomIcons   : {               // using html tag create toolbar icon, unused default <a> tag.
        lowercase        : "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>",
        "ucwords"        : "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"
    },
    toolbarIconTexts     : {},

    lang : {  // Language data, you can custom your language.
        name        : "zh-cn",
        description : "开源在线Markdown编辑器<br/>Open source online Markdown editor.",
        tocTitle    : "目录",
        toolbar     : {
            //...
        },
        button: {
            //...
        },
        dialog : {
            //...
        }
        //...
    }
}
         */
    </script>
{% endblock %}